<template>
	<!-- <view class="container" :style="{paddingTop:tH}">
		<view class="headerTit" :style="{height:tH,paddingTop:pT}">
			泗河基地
		</view> -->
	<sys-container :label="'消防设施操作员理论练习与考试'" showBack withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				<view class="logoBg">
					<image :src="testInfo.image" mode="widthFix" style="width:100%;display: block;"></image>
				</view>
				<view class="contentInfo">
					<view class="testInfo">
						<view class="time">
							<view class="singleTime">
								<view class="timeVal" v-if="testInfo.txamination_time">
									<text style="font-size: 36rpx;">{{testInfo.txamination_time}}</text>
									<text style="font-size: 24rpx;">分钟</text>
								</view>
								<view class="timeVal" v-else>
									<text style="font-size: 36rpx;">无限制</text>
								</view>
								<view class="timeTit">
									考试用时
								</view>
							</view>
							<view class="singleTime">
								<view class="timeVal" v-if="testInfo.txamination_time">
									<text style="font-size: 36rpx;">{{testInfo.txamination_time}}</text>
									<text style="font-size: 24rpx;">分钟</text>
								</view>
								<view class="timeVal" v-else>
									<text style="font-size: 36rpx;">无限制</text>
								</view>
								<view class="timeTit">
									考试用时
								</view>
							</view>
						</view>

						<u-button block 
							:custom-style="{width:'100%',height:'90rpx',borderRadius:'90rpx',marginBottom:'40rpx',background:'#D7201D',color:'#fff'}"
							@click="takeTask">开始进行模拟考试</u-button>
						<view class="onlineNum">
							答题人数：{{testInfo.answer}}人
						</view>
					</view>

					<view class="desc">
						<view class="descTit">
							题型介绍
						</view>
						<view class="descMain">
							<view class="singleRow">
								1、单选题（选项中只有1个正确答案）；
							</view>
							<view class="singleRow">
								2、多选题（选项中有大于2个正确答案）；
							</view>
							<view class="singleRow">
								3、判断题（选项中只有1个正确答案）。
							</view>
						</view>
					</view>
					<view class="desc">
						<view class="descTit">
							考前必读
						</view>
						<view class="descMain">

							<view class="singleRow">
								1、答题者准备好后，可点击“开始做题”按钮开始考试；
							</view>
							<view class="singleRow">
								2、做题前可看题目前的标签，明白此题是单选题、多选题或判断题；
							</view>
							<view class="singleRow">
								3、作答完所有的题目点击“提交考试”按钮，即可查看自己的考试结果。
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <van-dialog id="van-dialog"></van-dialog> -->
		</template>

	</sys-container>

	<!-- </view> -->
</template>

<script>
	import {
		testPaperDetails,
		userAnswer
	} from '@/globalApi/requestApi.js'
	// import Dialog from '@/wxcomponents/@vant/weapp/dialog/dialog.js'
	export default {
		components: {

			// sysContainer
		},
		data() {
			return {
				testInfo: {},
				id: {}
			}
		},
		onLoad(options) {
			if (options.data) {
				this.id = JSON.parse(options.data).id
				this.initData()

			}
		},
		methods: {
			initData() {
				testPaperDetails({
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.testInfo = res.data
					}
				})
			},
			takeTask() {
				// uni.navigateTo({
				// 	url: '../takeTest/takeTest'
				// })
				let that = this
				this.$showModal2({
					title: '确认开始答题吗？',
					// content: '这是一个模态弹窗',
					
				}).then(()=>{
				
							userAnswer({
								test_id: that.testInfo.id,
								type: that.testInfo.type,
							}).then(res => {
								if (res.code == 200) {
									uni.navigateTo({
										url: '../takeTest/takeTest?id=' + that.testInfo.id +
											'&type=' + that.testInfo.type + '&recordId=' + res
											.data + '&testTime=' + that.testInfo
											.txamination_time
									})
								}
							})
						
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	* {}

	.warp {
		min-height: 100%;
		width: 100%;
		background: #f8f8f8;
		overflow: hidden;

		.testBg {
			width: 100%;
		}

		.contentInfo {
			width: 100%;
			padding: 0 36rpx;
			box-sizing: border-box;

			background: linear-gradient(0deg, #F7F1E3, #F6BA68);

			.testInfo {
				padding: 35rpx 53rpx;
				box-sizing: border-box;
				background: #fff;
				width: 100%;

				.time {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 18rpx;
					margin-bottom: 64rpx;
					border-radius: 8rpx;
					border-radius: 8rpx;

					.singleTime {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.timeTit {
							margin-top: 60rpx;
							font-size: 24rpx;
						}

						.timeVal {
							font-weight: bold;
							color: #222222;
						}
					}
				}

				.onlineNum {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #555555;
				}
			}

			.desc {
				width: 100%;
				padding: 30rpx 20rpx;
				background: #fff;
				box-sizing: border-box;
				margin-top: 22rpx;

				border-radius: 8rpx;

				.descTit {
					font-size: 22rpx;
					font-weight: bold;
					color: #222222;
					margin-bottom: 29rpx;
				}

			}

			.singleRow {
				margin: 10rpx 0;
				font-size: 24rpx;
				font-weight: 400;
				color: #222222;
			}
		}
	}
</style>